Web Frontend Engineer Skills

あくまで、Web front-endがメイン

他の分野は深く突っ込まない

Engineer Base Skills

Backend Engineer Skills

TODO:そのうち、Web platform に変えるかも

hr.icon

レベル感

✅使い方を知っていて、最小限の調査で済むテクノロジー

👀いつ、何故使うかは説明できる。だけど詳細に使ったことはない(実務、ちゃんとした個人開発)

⛰聞いたことはあるけど何者なのか説明できない

Engineer Base Skills

基本的な共通のエンジニアスキルはここにまとめている

Web Front-end Base

HTML HyperText Markup Language

✅Basis

✅Form フォーム,validation バリデーション

✅Semantic セマンティック HTML

Basis

Layout

👀Froats CSS

最近使うこと無いので👀

✅Positioning CSS

✅display CSS

✅Box Model CSS

👀Grid Layout

少しだけ使ったことある。も少し使いこなせば✅へ

✅Flexbox

👀Viewport

👀size サイズ CSS

Responsive レスポンシブデザイン

✅Media Queries

CSS Pre-processors

Sass.iconSass

✅SCSS

✅node-sassからdart sassへの書き換え

JavaScript

✅Syntax and Basic Constructs

連結リスト Linked list 連想配列辞書 object

👀Fetch API

✅axios

✅ES2015 ES6

コンセプト Concept

✅モジュール modules

👀Hoisting 巻き上げ

✅Scope スコープ

👀prototype プロトタイププログラミング

👀DOM Document Object Model

生であまり書いてない、都度調べてる

Vue.jsReact使って書いてるから

開発環境、ツール

デバッグツール

✅Google Chrome DevTools

👀React Developer Tools

✅Vue.js devtools

✅vscode VsualStudioCode

Package Managers パッケージマネージャー

✅npm.iconnpm

✅yarn.iconyarn

Build Tools Front-end

Linters and Formatters

✅Prettier.iconPrettier

✅ESLint.iconESLint

✅stylelint

Module Bundlers

👀webpack.iconwebpack

⛰Rollup

👀Parcel

✅npm scripts

✅Babel.iconBabel

Build Tool

✅vue-cli

✅TypeScript.iconTypeScript

静的型付け

扱える型

型定義

型ガード

Front-end Framework

✅Vue.js.iconVue.js

👀React.iconReact (ライブラリ)

Component コンポーネント code

Vue.js

👀Class Component

Vue Composition API

React

👀Class Component

👀Functional Component

✅Vue Router

State Management 状態管理

✅Vuex

👀Redux

React.iconReact Component Libraries

👀Chakra UI

⛰Material UI

Vue.js.iconVue.js

👀Element UI.iconElement UI

✅Vuetify.iconVuetify

Non JavaScript

👀Bootstrap.iconBootstrap

👀Tailwind CSS

Test Web Front-end

Unit Testing 単体テスト

✅Jest.iconJest

E2ETest

⛰Cypress

フレームワーク寄り

⛰@testing-library/react

⛰Enzyme

👀vue-test-utils

スナップショットテスト

Visual Regression Testing

👀Storybook.iconStorybook

👀reg-suit.iconreg-suit

Web Standards

👀Web Components

HTML Templates

WebAuthn

非機能要件

WebPlatformApp Performance

✅Performance Metrics パフォーマンス計測

👀performanceの目標設定

👀App Environmentの設定 performance

✅Assets Optimizations 資産の最適化

✅Build Optimizations ビルドの最適化

👀Rendering Optimizations レンダリングの最適化

👀Delivery Optimizations 配信の最適化

👀Performance Testing

👀Performance Monitoring

👀Accessibility アクセシビリティ Web

通信系

Architecture アーキテクチャ系

質問形

アプリケーションの特性に応じたアーキテクチャを設計できる

CSS Architecture 設計手法

✅BEM

✅OOCSS Object-Oriented CSS

✅SMACSS

✅FLOCSS

Modern CSS

も少し、綺麗に分けたい

⛰styled-components

⛰CSS Modules

⛰Styled JSX

⛰Emotion

⛰CSS in JS

web-frontend Architecture寄りのこと記載

✅Atomic Design

⛰OOUI オブジェクト指向UI

Modern Front-end onRuby on Rails

React...

Vue.js...

モノリシック→マイクロフロントエンド

PWA Progressive Web App

Web Standards

👀Web Storage API

⛰WebSocket API

⛰Service Worker サービスワーカー

⛰Location API

⛰Notification API

⛰Device Orientation Web

⛰Web Payment

⛰Credential Web

SSR Server Side Rendering

React.iconReact

⛰Next.js

GatsbyJS

Vue.js.iconVue.js

⛰Nuxt.js

API for Frontend

RESTful API

BFF Backends For Frontends

👀Node.js

GraphQL

⛰Apollo

⛰Relay

SSG 静的サイトジェネレーター

⛰GatsbyJS

⛰Next.js

⛰Nuxt.js

⛰VuePress

Desktop Application by js

⛰Electron

Mobile Application by js

👀React Native

その他

Design ,Creative寄り

SVG Scalable Vector Graphics

リッチFront-end

👀Three.js

Animation アニメーション

👀Lottie

⛰Anime.js

⛰GSAP GreenSock Animation Platform

画像 Image

✅png,JPEG,WebP

👀SVG Scalable Vector Graphics

書き方参考

Learn to become a modern frontend developer

grab/front-end-guide: 📚 Study guide and introduction to the modern front end stack.

Front End Interview Handbook | Front End Interview Handbook

Front-of-the-front-end and back-of-the-front-end web development | Brad Frost

front-of-the-front-end and back-of-the-front-end

フロントエンドに関わる人のスキルとして触れておきたい・知っておきたいこと

途中まで見た。とても良い

hr.icon

実装機能

以下、機能ごとに述べる枠作る

各UIの実装的意見、チームでのコミュニケーション、経験が大事と思う

hr.icon

↑に書いてないことで大事

コミュニケーション

Design デザイン,Business ビジネス,Back-end バックエンド

hr.icon